<template>
  <ul class="draggable-container" :style="activePageInfoType === 'userCenter' ? 'background:#f7f7f7' : ''">
    <el-scrollbar style="height:100%" class="hid-scrollbar-x">
      <draggable
        :list="activePageForm.modules"
        :options="{group:'modules',put:true, sort: pageMode==='module'}"
        class="draggable-content"
        @start="start"
        @end="end"
        :style="activePageInfoType === 'userCenter' ? 'background:#f7f7f7' : ''"
      >
        <li
          v-for="(item,index) in activePageForm.modules"
          :key="index"
          class="draggable-cell"
          :class="index===activePageForm.activeModuleIndex&&pageMode==='module'?'draggable-cell-active':''"
          @click="chooseModule(index)"
          :style="activePageInfoType === 'userCenter' ? 'background:#f7f7f7;border-color:#f7f7f7' : ''"
        >
          <Pingmianlunbo v-if="item.type === 'pingmianlunbo' || item.key === 'pingmianlunbo'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Cengdielunbo v-if="item.type === 'cengdielunbo' || item.key === 'cengdielunbo'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Mofangdaohang v-if="item.type === 'mofangdaohang' || item.key === 'mofangdaohang'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Kapiandaohang v-if="item.type === 'kapiandaohang' || item.key === 'kapiandaohang'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Biaoqiandaohang v-if="item.type === 'biaoqiandaohang' || item.key === 'biaoqiandaohang'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Liebiaochuchuang v-if="item.type === 'liebiaochuchuang' || item.key === 'liebiaochuchuang'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Gundongchuchuang v-if="item.type === 'gundongchuchuang' || item.key === 'gundongchuchuang'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Shangpinzhuanlan v-if="item.type === 'shangpinzhuanlan' || item.key === 'shangpinzhuanlan'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Huiyuankaika v-if="item.type === 'huiyuankaika' || item.key === 'huiyuankaika'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Chongzhi v-if="item.type === 'chongzhi' || item.key === 'chongzhi'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Chongzhijiangli v-if="item.type === 'chongzhijiangli' || item.key === 'chongzhijiangli'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Yingxiaohuodong v-if="item.type === 'yingxiaohuodong' || item.key === 'yingxiaohuodong'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Lingquan v-if="item.type === 'lingquan' || item.key === 'lingquan'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Lingquanzhuanlan v-if="item.type === 'lingquanzhuanlan' || item.key === 'lingquanzhuanlan'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Tupian v-if="item.type === 'tupian' || item.key === 'tupian'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Anniu v-if="item.type === 'anniu' || item.key === 'anniu'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Qianzhianniu v-if="item.type === 'qianzhianniu' || item.key === 'qianzhianniu'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Wenbenduan v-if="item.type === 'wenbenduan' || item.key === 'wenbenduan'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Kezhankaishuoming v-if="item.type === 'kezhankaishuoming' || item.key === 'kezhankaishuoming'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Sousuolan v-if="item.type === 'sousuolan' || item.key === 'sousuolan'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Shangpinfenlei v-if="item.type === 'shangpinfenlei' || item.key === 'shangpinfenlei'" :module.sync="activePageForm.modules[index]" :fileBaseUrl="fileBaseUrl" />
          <Dianpujianjie v-if="item.type === 'dianpujianjie' || item.key === 'dianpujianjie'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Guanzhugongzhonghao v-if="item.type === 'guanzhugongzhonghao' || item.key === 'guanzhugongzhonghao'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Gerenxinxi v-if="item.type === 'gerenxinxi' || item.key === 'gerenxinxi'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Kaikaquanyi v-if="item.type === 'kaikaquanyi' || item.key === 'kaikaquanyi'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <Changyonggongneng v-if="item.type === 'changyonggongneng' || item.key === 'changyonggongneng'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl" />
          <ScrollAffiche v-if="item.type === 'gundonggonggao' || item.key === 'gundonggonggao'" :module="JSON.parse(JSON.stringify(item))" :fileBaseUrl="fileBaseUrl"  />
        </li>
      </draggable>
    </el-scrollbar>
  </ul>
</template>

<script>
import draggable from 'vuedraggable'
import { mapGetters } from 'vuex'
import modules from './modules/modules'
export default {
  components: {
    draggable,
    ...modules
  },
  props: {
    pageMode: {
      type: String,
      default: null
    },
    activePageInfoType: {
      type: String
    }
  },
  data() {
    return {
      // 配置
      // 状态
      // 数据
      startIndex: null,
      endIndex: null
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['activePageForm', 'fileBaseUrl'])
  },
  mounted() {
    console.log(this.pageMode)
  },
  methods: {
    /**
     * 数据组
     */

    /**
     * 按钮组
     */
    // 选择模块
    chooseModule(index) {
      setTimeout(() => {this.activePageForm.activeModuleIndex = index})
      this.activePageForm.activeModuleIndex = null

    },

    // 开始
    start(e) {
      // console.log(e);
    },

    // 拖拽结束
    end(e) {
      // 更新激活的activeModuleIndex
      if (e.newIndex === e.oldIndex) return
      if (e.oldIndex === this.activePageForm.activeModuleIndex) {
        this.activePageForm.activeModuleIndex = e.newIndex
      } else if (
        e.oldIndex < this.activePageForm.activeModuleIndex &&
        this.activePageForm.activeModuleIndex <= e.newIndex
      ) {
        this.activePageForm.activeModuleIndex -= 1
      } else {
        this.activePageForm.activeModuleIndex += 1
      }
    }
    /**
     * 状态组
     */

    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.draggable-container {
  background: #fff;
  height: 657px;
  overflow: auto;
}

/* 拖拽内容 */
.draggable-content {
  height: 657px;
  padding: 0 5px;
  .p-module {
    width: 100%;
    height: auto;
  }
  li {
    cursor: pointer;
    // transition: all 0.38s;
  }
  .draggable-cell {
    cursor: pointer;
    border: 3px solid #fff;
  }
  .draggable-cell-active {
    border: 3px solid #409eff;
    border-radius: 10px;
  }
  .draggable-cell.sortable-chosen {
    background: #ecf5ff;
  }

  /* 选择之前 */
  ::v-deep .draggable-cell-prev {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80px;
    font-size: 14px;
    .i-module {
      width: 36px;
      height: 36px;
      margin-bottom: 10px;
    }
  }
}
</style>
